<template>
    <div class="campusLifeBox">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="校园生活" name="schoolProfile">
                <el-row v-if="!isDetailShow">
                    <el-col :span="24">
                        <div class="content clearFix" @click="isDetailShow=true">
                            <label>心理咨询室</label>
                            <span class="time">2019-10-12</span>
                        </div>
                        <div class="content clearFix">
                            <label>停课不停学，惠中在行动 ——惠农中学理化生组线上教学纪实     </label>
                            <span class="time">2019-10-12</span>
                        </div>
                        <div class="content clearFix">
                            <label>“病毒无情人有情，隔离不割爱与学” -----惠农中学数学组开展空</label>
                            <span class="time">2019-10-12</span>
                        </div>
                        <div class="content clearFix">
                            <label>语文组教研活动之青年教师三课活动     </label>
                            <span class="time">2019-10-12</span>
                        </div>
                        <div class="content clearFix">
                            <label>语文组教研活动之青年教师三课活动     </label>
                            <span class="time">2019-10-12</span>
                        </div>
                    </el-col>
                </el-row>
                <div class="block" v-if="!isDetailShow">
                    <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[100, 200, 300, 400]"
                            :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="400">
                    </el-pagination>
                </div>

                <ClassArticleDetail v-if="isDetailShow" :activeIndex="1"></ClassArticleDetail>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import ClassArticleDetail from '@c/article/classArticleDetail'
    export default {
        components:{
            ClassArticleDetail
        },
        data() {
            return {
                activeName: 'schoolProfile',
                currentPage:1,
                isDetailShow:false
            };
        },
        methods: {
            handleClick(tab, event) {
            },
            handleSizeChange(val) {
            },
            handleCurrentChange(val) {
            }
        }
    }
</script>

<style lang="scss" scoped>
.campusLifeBox{
    background-color: white;
    box-sizing: border-box;
    padding: 0 10px;
    min-height: 70vh;
    .content{
        font-size: 14px;
        color: #303133;
        margin-bottom: 10px;
        text-align: left;
        cursor: pointer;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
        label{
            cursor: pointer;
        }
        .time{
            font-size: 12px;
            float: right;
            margin-top: 5px;
        }
    }

    .clearFix::after{
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }
}
</style>